<template>
  <div class="inputcompon">
    <input
      :placeholder="textplaceholder"
      :type="type"
      v-model="inputval"
      :class="{
        success: isValid,
        error: !isValid
      }"
      @blur="inputblur"
    />
  </div>
</template>

<script>
export default {
  props: ["textplaceholder", "type", "rule", "err_Msg"],
  data() {
    return {
      // 获取输入框中的值
      inputval: "",
      isValid: true
    };
  },
  watch: {
    // 监听输入框的值变化
    inputval(newval) {
      var regExp = new RegExp(this.rule);
      var errMsg = this.err_Msg;
      this.isValid = regExp.test(newval);
      if (!this.isValid) {
        return;
      }
      this.$emit("setval", newval);
    }
  },
  methods: {
    inputblur() {
      if (!this.isValid) {
        this.$toast.fail("输入有误  请重新输入");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.inputcompon {
  padding: 0 2.778vw;
  margin: 5.556vw;
  input {
    font-size: 5vw;
    padding: 1.389vw 0;
    width: 100%;
    outline: none;
    border: none;
    // background: #f2f2f2;
    border-bottom: 0.556vw solid #757575;
  }
  .error {
    border-bottom-color: red;
  }
}
</style>